<template>
	<view class="">
		<cLabel title='姓名' dataText='卡卡' :disabled='true'  rightIcon='cuIcon-people'   />
		<cLabel title='text' v-model='form.text' @handRight='handTextRight' :flex='false' :dataText='form.text' mode='text'  rightIcon=''   />
		<cLabel title='number' v-model='form.number'  mode='number' :dataText='form.number'  rightIcon=''  />
		<cLabel title='idcard' v-model='form.idcard'  mode='idcard' :dataText='form.idcard'  rightIcon=''  />
		<cLabel title='dateTime' :dataText='form.dateTime'  v-model='form.dateTime' mode='dateTime'    />
		<!-- cuIcon-vipcard text-red -->
		<cLabel title='password' v-model='form.password'  :mode='isPass' :dataText='form.password' @handRight='handRight(passState)' rightIcon=''   />
		<!-- passState -->
		<cLabel title='switch' @hand='handSwitch' :dataText='form.switch'  align='right'  mode='switch' rightIcon=''   />
		
		<cLabel title='textarea' top="30upx" v-model='form.textarea' @handRight='handTextareaRight' :dataText='form.textarea' mode='textarea' rightIcon='cuIcon-close'    />
		<cLabel title='img'  @hand='handImg' mode='img' :flex='false'   />
		<cLabel title='video'  @handvid='handVideo' mode='video' :flex='false'  rightIcon='' />
		<cLabel title='selector' :dataText='form.selector' @getData='getData' :selectList="selectList"  v-model='form.selector' mode='selector'    />
		<cLabel title='half' :dataText='form.half'  :disabled='true'  v-model='form.half' mode='half'    /> 
		<cLabel title='date' :dataText='form.date' v-model='form.date'   mode='date'    /> 
		<cLabel title='yearMonth' :dataText='form.yearMonth' v-model='form.yearMonth' mode='yearMonth'    />
		<cLabel title='dateTime' :dataText='form.dateTime'  v-model='form.dateTime' mode='dateTime'    /> 
		<cLabel title='range' :dataText='form.range'  v-model='form.range' mode='range'    /> 
		<cLabel title='time' :dataText='form.time'  v-model='form.time' mode='time'    />
		<cLabel title='region' :dataText='form.region'  v-model='form.region' mode='region'     />
		<cLabel title='limit' :dataText='form.limit'  v-model='form.limit' mode='limit'    />
		<cLabel title='limitHour' :dataText='form.limitHour'  v-model='form.limitHour' mode='limitHour'    />
		<view style="height:50px"> as</view>
		<view class="foot">
			<button class="bg-blue" @tap="handSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	var check = require('@/common/checker.js')
	import cLabel from "@/components/cat-label/cat-label.vue"
	import cUpload from "@/components/c-upload/c-upload.vue"
	export default {
		components:{
			cLabel,
			cUpload
		},
		data() {
			return {
				isPass:'password',
				passState:'cuIcon-attentionforbidfill text-gray',
				selectList:[
					{label:"公交",value:1},
					{label:"大巴",value:2},
					{label:"其他",value:-9},
				],
				form:{
					text:"",
					number:'',
					idcard:'',
					password:'',
					switch:true,
					textarea:'',
					img:[],
					vid:[],
					selector:'',
					selectorData: '',
					half:'',
					date:'',
					yearMonth:'',
					dateTime:'',
					range:'',
					time:'',
					region:'',
					limit:'',
					limitHour:'',
				},
				rules:{
					text:[
						{checkType:'phone',errorMsg:'请正确输入手机号码'},
						{checkType:'maxMin',max:11,min:7,errorMsg:'长度介于 7-11 个字符'},
					],
					idcard:[
						{checkType:'noempty',errorMsg:'不能为空'},
						{checkType:'card',errorMsg:'请正确输入身份证号码'},
					]
				}
			}
		},
		methods: {
			getData(e){
				console.log(e)
				this.form.selectorData = e.checkArr.value
			},
			
			handTextareaRight(){
				this.form.textarea = ''
			},
			handTextRight(){
				this.form.text = ''
			},
			handRight(val){
				this.passState = this.isPass == 'password' ? 'cuIcon-attentionfill text-green' : 'cuIcon-attentionforbidfill text-gray';
				this.isPass = this.isPass == 'password' ? 'text' : 'password'
			},
			handSwitch(val){
				this.form.switch = val;
			},
			handImg(val){
				console.log(val)
				this.form.img = val;
			},
			handVideo(val){
				console.log(val)
				this.form.vid = val;
			},
			handSubmit(){
				console.log(this.form)
				let state = check.check(this.form, this.rules);
				if(!state){
					uni.showToast({ title:check.error, icon:'none', duration:2000 })
					return
				}else{
					uni.showToast({ title:'表单验证成功', duration:2000 })
				}
			}
		}
	}
</script>

<style>
	.foot{position: fixed;bottom: 0;width: 100%;}
</style>